<template>
  <div class="bigDiv">
    <button @click="getNodeEnv">获取开发环境</button>
    <button @click="getApi">获取接口环境</button>
    <div class="message">
      <span v-for="item in message">{{ item.text }}</span>
    </div>

    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item" style="height:90px;">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
      <div class="item">14</div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";
export default {
  name: "getApiDom",
  mite:{
    title:'调用接口',
    icon: ''
  },
  data() {
    return {
      message: [],
    };
  },
  methods: {
    getNodeEnv() {
      // 获取接口地址
      // import.meta.env.VITE_BASIC_API

      // 获取开发环境
      this.message.push({
        // text: import.meta.env.VITE_BASIC_API
        text: process.env.NODE_ENV,
      });
    },
    getApi() {
      const controller = new AbortController();
      const data = {
        username: "hekang",
        password: "123456",
      };

      login(data).finally(() => {
        this.message.push({
          // text: import.meta.env.VITE_BASIC_API
          text: process.env.VUE_APP_BASE_API,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>

.wrap {
  margin-top: 50px;
  width: 100%;
  padding: 0 20px;
  /* 瀑布流容器内元素的间隔 */
  column-gap:10px;
  /* 瀑布容器内排列的列数 */
  column-count: 2;
}
.item {
  padding: 10px;
  border: 1px solid #000;
  margin-bottom: 10px;
  height: 300px;
  /* avoid避免在主体框中插入任何中断（页面，列或区域） */
  break-inside: avoid;
}

.bigDiv {
  .message {
    span {
      width: 100%;
      display: inline-block;
      // white-space: pre-line;
    }
  }
}
</style>